<template>
  <!-- 图片搜索框组件-->
  <div class="pictureSearchForm">
    <a-form ref="formRef" layout="inline" :model="searchParams" @finish="doSearch" :rules="rules">
      <a-form-item label="关键词" name="searchText">
        <a-input v-model:value="searchParams.searchText" placeholder="从名称和简介搜索" />
      </a-form-item>
      <a-form-item name="category" label="分类">
        <a-auto-complete
          v-model:value="searchParams.category"
          placeholder="请输入分类"
          :options="categoryOptions"
          :allowClear="true"
          style="min-width: 180px"
        />
      </a-form-item>
      <a-form-item name="tags" label="标签">
        <a-select
          v-model:value="searchParams.tags"
          placeholder="请选择或输入标签"
          mode="tags"
          :options="tagsOptions"
          allowClear
          style="min-width: 180px"
        />
      </a-form-item>
      <a-form-item name="tags" label="日期">
        <a-range-picker
          style="width: 400px"
          show-time
          v-model:value="dateRange"
          :placeholder="['编辑开始时间', '编辑结束日期']"
          format="YYYY/MM/DD HH:mm:ss"
          :presets="rangePresets"
          @change="onRangeChange"
          allowClear
        ></a-range-picker>
      </a-form-item>
      <a-form-item name="name" label="名称">
        <a-input v-model:value="searchParams.name" placeholder="请输入名称" allowClear />
      </a-form-item>
      <a-form-item name="introduction" label="简介">
        <a-input v-model:value="searchParams.introduction" placeholder="请输入简介" allowClear />
      </a-form-item>
      <a-form-item name="picWidth" label="宽度">
        <a-input-number v-model:value="searchParams.picWidth" placeholder="请输入宽度" allowClear />
      </a-form-item>
      <a-form-item name="picHeight" label="高度">
        <a-input-number
          v-model:value="searchParams.picHeight"
          placeholder="请输入高度"
          allowClear
        />
      </a-form-item>
      <a-form-item name="picFormat" label="格式">
        <a-input v-model:value="searchParams.picFormat" placeholder="请输入格式" allowClear />
      </a-form-item>
      <a-form-item>
        <a-button type="primary" html-type="submit" style="width: 96px" @click="doSearch">
          搜索
        </a-button>
        <a-button style="margin-left: 8px" @click="resetSearch">重置</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import type { Rule } from 'ant-design-vue/es/form'
import { listPictureTagCategoryUsingGet } from '@/api/pictureController.ts'
import dayjs from 'dayjs'

interface Props {
  // 搜索函数
  onSearch?: (searchParams: API.PictureQueryRequest) => void
}

const props = defineProps<Props>()
// 搜索参数
const searchParams = reactive<API.PictureQueryRequest>({})

// 获取数据
const doSearch = () => {
  props.onSearch?.(searchParams)
}

const rules: Record<string, Rule[]> = {
  // searchText: [
  //   {
  //     required: true,
  //     message: '请输入关键词',
  //   },
  // ],
}

// 分类和标签选项列表
const tagsOptions = ref<{ label: string; value: string }[]>([])
const categoryOptions = ref<{ label: string; value: string }[]>([])

/**
 * 获取所有可用的分类和标签选项。
 * 这些选项用于填充分类选择框和标签选择框。
 */
const fetchCategoryOptions = async () => {
  const res = await listPictureTagCategoryUsingGet()
  if (res.code === 0 && res.data) {
    tagsOptions.value = res.data.tagList.map((item: string) => ({ label: item, value: item }))
    categoryOptions.value = res.data.categoryList.map((item: string) => ({
      label: item,
      value: item,
    }))
  }
}
onMounted(() => {
  fetchCategoryOptions()
})

// 日期范围
const dateRange = ref<[]>([])

/**
 * 日期范围更改时触发
 * @param dates
 * @param dateStrings
 */
const onRangeChange = (dates: any[], dateStrings: string[]) => {
  console.log(dates, dateStrings)
  if (dates.length < 2) {
    searchParams.startEditTime = undefined
    searchParams.endEditTime = undefined
  } else {
    searchParams.startEditTime = dates[0].toDate()
    searchParams.endEditTime = dates[1].toDate()
  }
  console.log(searchParams)
}

// 日期范围预设
const rangePresets = ref([
  { label: '过去 7 天', value: [dayjs().add(-7, 'd'), dayjs()] },
  { label: '过去 14 天', value: [dayjs().add(-14, 'd'), dayjs()] },
  { label: '过去 30 天', value: [dayjs().add(-30, 'd'), dayjs()] },
  { label: '过去 90 天', value: [dayjs().add(-90, 'd'), dayjs()] },
])

// 重置搜索逻辑：清空搜索表单和查询参数，并重新加载数据
const resetSearch = () => {
  resetQueryParams()
}
const formRef = ref()
// 通用重置函数
const resetQueryParams = () => {
  // 使用表单自带的resetFields方法
  formRef.value.resetFields()
  // 取消所有对象的值
  Object.keys(searchParams).forEach((key) => {
    searchParams[key] = undefined
  })
  searchParams.pageNum = 1
  searchParams.pageSize = 10
  dateRange.value = []
  props.onSearch?.(searchParams)
}
</script>

<style scoped>
.pictureSearchForm .ant-form-item {
  margin-top: 16px;
}

.pictureSearchForm .ant-form {
  margin-bottom: 16px;
}
</style>
